<script setup>
import { computed, ref } from 'vue'
import iconList from '@/config/icon'

const props = defineProps({
  value: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:value'])
let icon = computed({
  get: () => props.value,
  set: (value) => emit('update:value', value)
})

let activeKey = ref('line')
let type = ref([
  { type: '线条', active: 'line' },
  { type: '实心', active: 'fill' },
  { type: '其他', active: 'other' },
])
let list = ref(iconList)

const changeHandler = (value) => {
  icon.value = value
}
</script>

<template>
  <a-popover trigger="click" placement="bottomLeft" class="padd-top-0">
    <template #content>
      <div class="select-icon-box">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane v-for="item in type" :key="item.active" :tab="item.type">
            <div class="select-icon sidebar-box">
              <a-row :gutter="[8, 8]">
                <a-col :span="4" v-for="(icon, idx) in list[item.active]" :key="idx">
                  <div class="icon-item" @click="changeHandler(icon)">
                    <my-icon :type="icon" color="#595959"/>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
    <a-input v-model:value="icon" placeholder="选择图标" readonly>
      <template #prefix v-if="icon">
        <my-icon :type="icon" color="#434343"></my-icon>
      </template>
      <template #suffix>
        <my-icon type="icon-down" color="#d9d9d9"></my-icon>
      </template>
    </a-input>
  </a-popover>
</template>

<style lang="less" scoped>
.select-icon-box {
  width: 350px;

  .select-icon {
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 0 16px;
    height: 300px;
    overflow-x: hidden;


    .icon-item {
      display: block;
      padding: 6px 0;
      font-size: 22px;
      text-align: center;
      transition: transform .1s;
      cursor: pointer;
      border: 1px solid #ededed;
      border-radius: 2px;

      &:hover {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
      }
    }
  }
}
</style>
